認識 - 標題標籤

讓我們來介紹一下 <h> 標籤，它有一個獨特的特點，就是在 <h> 後面會跟著一個數字。這裡的 <h> 代表「標題」（heading），而標題標籤的可以從 <h1> 到 <h6>分成 6 個層級。隨著標題的數字增加，在畫面上的字體的大小也會逐漸變小。

這樣的目的是什麼呢？其實在瀏覽器要試著解讀你的架構，要透過 h 標籤的層級用法去辨別出哪些是標題、次標題或是內文，讓使用著可以在瀏覽時，快速辨別網頁架構，值得注意的是，一個網頁內通常只會有一個 <h1> 標題，通常被視為網頁的主標題，也是這個網站最重要的概念。

語法：

<h1>網頁菜菜子的一天</h1>
<h2>網頁菜菜子的一天</h2>
<h3>網頁菜菜子的一天</h3>
<h4>網頁菜菜子的一天</h4>
<h5>網頁菜菜子的一天</h5>
<h6>網頁菜菜子的一天</h6>

如果我們把這些文字放上 CodePen，你會發它呈現的網頁效果變化：

重要的是要記住，<h1> 標題具有很大的視覺重要性，所以在使用時應謹慎選擇和適當地使用。它不僅影響網頁的結構，也對搜索引擎優化（SEO）和無障礙使用有一定的影響。

大家一定會很好奇，網頁的無障礙網頁指的是什麼意思呢？
如果我今天講得是無障礙空間，你一定很快就能意會出，提供一個方便行走的通道給身障者朋友；而無障礙網頁指得是提供友善瀏覽的網頁給視障者朋友，讓他們可以用更好的方式來瀏覽網路，視障者上網時會使用輔具（語言念讀或是點字）因此完善的階層概念，可以讓他們快速知道網頁上每個區塊的架構。

❏ 認識 - 段落標籤

除了標題可以使用 標籤來標記之外，那麼段落呢？菜菜子如果寫了一篇文章，內文一共有三段，這又該怎麼標記呢？

語法：

<p>段落內容</p> 

該是時候來認識我們的 <p> 標籤了！這裡的 <p> 代表「段落」（paragraph），它的主要作用是用來標示一個段落的開始和結束，在不同的段落之間會自動添加空白行。或許這樣說有點抽象，不過現在就讓我們透過菜菜子的範例來更深入了解 <p> 標籤吧！

<p>我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段我是第一段</p> 
<p>我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段</p>
<p>我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段我是第三段</p>

還記得標籤的特性是需要成對使用，並且結尾的標籤要使用 / 表示結束。

看到剛剛的例子，有人會問，為什麼 p 標籤沒有像 h 標籤一樣用數字去劃分字級大小呢？

p 標籤不需要使用數字來劃分字級大小，是因為 p 標籤代表的是一個段落（paragraph），而不是字級的大小。HTML 的概念是將內容透過標記使它結構化，讓瀏覽器和其他程式能夠理解並適當地呈現內容。

如果以字級大小來說，之後會學到 CSS，它可以控制畫面和字級，而 HTML 的任務是把網頁上的文字或是表格透過標記讓瀏覽器可以正確呈現給使用者知道，而數字的標記最重要是要讓瀏覽器知道，在整個網頁裡，哪一個最重要，或是哪一個是次等重要的，所以畫面的細節，主要還是會交給 CSS 控管。

❏ 認識 - HTML 屬性

在 HTML 的標籤中，我們可以使用屬性（attribute）來為標籤增加更多的說明和功能。屬性通常會位於起始標籤中，並以等號（=）將屬性和值 (value)分隔開來。值則會用引號（單引號或雙引號）包裹起來，以表示屬性的具體作為。

舉例來說，對於段落標籤 <p>，我們可以加入不同的屬性來說明或設定該段落的特性。屬性通常會位於起始標籤的內部，並使用以下格式表示：

attribute 是屬性，而 value 則是該屬性的值。屬性和值的組合可以根據需求而定，用於提供更多的資訊或控制元素的行為。需要注意的是，屬性和值之間使用等號（=）進行連接，使用屬性可以讓我們更靈活地定義和控制元素的外觀和行為。

我們舉個例子來更了解屬性：

<p class="highlight> 工程師每年黃金週的假，都會安排來花東感受大自然，去年搭上類火車，光是花蓮到台東就坐了六小時，今年則是有了 Berlingo 帶著我們東奔西跑，完全享受台東藍，請假避開人潮，就能擁有無限山景，讓身心重新 reset！ </p>

在這個例子中，我們使用了 <p> 段落標籤來寫出一個段落。該段落增加了 class 屬性，使用 "highlight" 的值，而這個值的目的是用來表示這裡的內容是一個突顯的段落。

屬性和值有些特性需要特別留意

• 用半形英文文字和符號
• 通常大寫和小寫都可以讓瀏覽器正確判讀，但建議一致以小寫為主。

簡單來屬性是為了幫助元素(elememt)做更多的客製化設定，如顏色變化和設計細節，用比較白話的例子來說，就好像你今天想要製作一本書，就可以用屬性來製定書本的尺寸、增加自己喜歡的樣式有或是其他想要的需求。

接下來的標籤介紹中，我也會介紹可以搭配使用的屬性，讓大家可以藉由實例更了解屬性和值之間的關係。

❏ 認識 - 圖片標籤

圖片標籤會使用<img>來為你的網頁置入一張圖片，這時候就會搭配到屬性，來讓這個標籤可以符合我們的需求和設定，那我們就來認識圖片標籤的語法：

• src 屬性

有沒有發現我們上一章節提到的，attribute(屬性)=“value(值)”，這裡屬性就是 src，其實就是 source 來源的縮寫，如果用在 img 的標籤裡，通常它所接的值是網頁位址 (URL)，稱為絕對路徑；或是後面接資料夾的位置所在，被稱為相對路徑。

舉個例子來說，如果你有張自己的手繪插圖，該張圖片並沒有發佈到網路上，僅存在你的本機端，如果是你在這個專案底下開了一個資料叫做 photos，專門放要製作網頁的圖片，裡面其中一張叫做 pic1，這時候我們要怎麼把這張圖片放上我們的網頁呢？這時候，只要使用相對路徑即可。

<img src= "photos/pic1" >

而絕對路徑和相對路徑要怎麼記憶呢？
如果你的圖片來源是一段網址，而這個網址基本上就已經是固定了，就可以稱為絕對路徑。
而你的來源是用相對應的位置，例如隸屬哪個資料夾下的資料，這張圖片沒有固定的網址資訊，只能用指向的位置指出這張圖片的圖片來源，就可以稱為相對路徑

• alt 屬性

alt 屬性是圖片的替代文字，基本上一定要設定，才能有效提升 SEO 搜尋效果。而 alt 屬性對網頁來說有多重要呢？假設今天圖片失效，正在瀏覽這個網站的朋友也可以從 alt 的屬性中，透過替代文字來了解該圖，讓。而搜尋引擎會根據 alt 的標籤來判斷這張照片資訊，因此 alt 盡量以簡短好理解的關鍵字來寫，留下正確的圖片資訊也是 SEO 優化很重要的要素。

當在網頁中使用圖片時，我們可以利用 alt 屬性來提供圖片的說明文字。這在搜尋引擎、視障者和圖片無法正常顯示的情況下都非常重要。

舉例來說，以下是一個使用 alt 屬性的圖片標籤：

<img src="photos/pic1.jpg" alt="一隻小貓趴著睡覺">

在這個例子中，src 屬性指定了圖片的來源（URL 或相對路徑），而 alt 屬性則提供了圖片的說明文字。當圖片無法正常載入時，瀏覽器會顯示 alt 屬性的內容，這讓使用者知道該圖片的內容或意義。

需要注意的是，img 標籤是 HTML 中的空元素，因此不需要結尾標籤。它僅依賴起始標籤和屬性來定義圖片的相關資訊。

為什麼 img 不用結尾標籤呢？
在 HTML 裡空元素是不用有結尾標籤的，而什麼是空元素呢？
如果 HTML 元素內是不需要放入文字內容的，例如 img 標籤，裡面是要插入一張圖片，而非內容，這樣我們就稱這樣的元素為空元素。